<template>
  <div class="customer-service-page">
    <el-card class="chat-box">
      <div slot="header" class="clearfix">
        <span>体育场客服中心</span>
      </div>
      <div class="messages">
        <div v-for="message in messages" :key="message.id" :class="{'message': true, 'self-message': message.self}">
          <el-avatar :src="message.avatar" :class="{'self-avatar': message.self}" />
          <div class="message-content">
            <span class="message-username">{{ message.username }}</span>
            <p>{{ message.content }}</p>
            <span class="message-time">{{ message.time }}</span>
          </div>
        </div>
      </div>
      <div class="input-area">
        <el-input v-model="newMessage" placeholder="请输入您的问题..." @keyup.enter="sendMessage">
          <template #append>
            <el-button @click="sendMessage">发送</el-button>
          </template>
        </el-input>
      </div>
      <div class="examples">
        <p>示例问题：</p>
        <ul>
          <li>如何预约篮球场地？</li>
          <li>健康建议</li>
          <li>体育场的开放时间是？</li>
        </ul>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      newMessage: '',
      responses: {
        "如何预约篮球场地": "您可以通过我们的网站或致电客服预约篮球场地。",
        "体育场的开放时间": "我们的体育场每日开放时间为早上6点至晚上10点。",
        "场地预订": "您可以在我们的网站上选择您想要预订的场地，并填写相关信息进行预订。",
        "设备租借": "我们提供各种运动设备的租借服务，您可以在设备租借页面查看并选择您需要的设备。",
        "健康建议": "运动前请确保充分热身，运动后进行适当的拉伸以避免肌肉酸痛。",
        "会员优惠": "成为会员后，您将享受场地预订和设备租借的优惠价格。",
        // 添加更多问题及回复
        "羽毛球场地预订": "羽毛球场地可以通过我们的网站进行预订，提供单打和双打场地。",
        "游泳池开放时间": "游泳池每日开放时间为早上6点至晚上9点。",
        "网球场地预订": "网球场地可以通过我们的网站进行预订，并提供租借球拍服务。",
        "设施维护": "我们定期对所有设施进行维护，确保设备和场地的安全。",
        "运动建议": "根据您的运动需求，我们提供专业的运动建议和指导。",
        "康复训练": "我们提供康复训练场地和设备，帮助您快速恢复健康。",
        // 模拟上百条问题及回复
        // ...
        // 扩展后的responses对象，包括更多问题和回复
        // 用户模块
        "如何添加好友": "您可以在好友列表中搜索好友并发送添加请求。",
        "如何删除好友": "在好友列表中找到您要删除的好友，点击删除按钮即可。",
        "如何搜索好友": "使用好友列表中的搜索功能输入好友的名字进行搜索。",
        "如何发起私信聊天": "点击好友头像，然后点击私信聊天按钮即可开始聊天。",
        "如何查看聊天记录": "在私信聊天界面，向上滚动即可查看聊天记录。",
        "如何删除聊天记录": "在聊天记录中长按需要删除的消息，然后选择删除。",
        "如何发布动态": "在动态广场，点击发布按钮即可发布文字、图片或视频动态。",
        "如何点赞动态": "点击动态下方的点赞按钮即可为动态点赞。",
        "如何评论动态": "在动态下方输入评论内容，然后点击发送按钮。",
        "如何创建群组": "在群组页面，点击创建群组按钮，填写群组信息即可创建。",
        "如何加入群组": "在群组页面搜索您感兴趣的群组，点击加入按钮。",
        "如何发起活动": "在活动中心，点击发起活动按钮，填写活动信息即可发起。",
        "如何报名参加活动": "在活动中心，找到您感兴趣的活动，点击报名按钮。",
        "如何查看活动详情": "点击活动列表中的活动名称，即可查看详细信息。",

        // 场地预约功能
        "如何浏览场地": "在场地预约页面，选择运动种类即可浏览场地。",
        "如何搜索场地": "使用场地预约页面的搜索功能，根据地点、运动类型等条件进行搜索。",
        "如何预约场地": "在场地预约页面选择场地和时间段，然后点击预约按钮。",
        "如何取消预约": "在预约记录页面找到您要取消的预约，点击取消按钮。",
        "如何查看预约记录": "在个人中心的预约记录页面，您可以查看所有预约信息。",
        "如何评价场地": "在预约记录页面，找到您使用过的场地，点击评价按钮。",
        "如何使用优惠代码": "在预约页面输入您的优惠代码，系统会自动应用折扣。",

        // 个人中心
        "如何修改个人信息": "在个人中心的个人信息管理页面，点击编辑按钮进行修改。",
        "如何修改密码": "在个人信息管理页面，点击修改密码按钮。",
        "如何查看消息通知": "在个人中心的消息通知页面，您可以查看所有通知。",
        "如何管理运动数据": "在个人中心的运动数据统计页面，您可以查看和导出运动数据。",

        // 客服中心
        "如何联系人工客服": "在客服中心页面，点击联系人工客服按钮，选择交流方式。",
        "如何查看问题进度": "在客服中心的进度跟踪页面，您可以查看问题处理进度。",
        "如何搜索常见问题": "在客服中心的常见疑难解答页面，输入关键词进行搜索。",
        // 其他
        "如何租借设备": "在设备租借页面，选择您需要的设备，填写相关信息进行租借。",
        "运动健康建议": "运动前请充分热身，运动后进行适当的拉伸以避免肌肉酸痛。",
        "疫情期间的开放情况": "疫情期间我们采取严格的防疫措施，具体请查看我们的公告。",
        "会员优惠": "成为会员后，您将享受场地预订和设备租借的优惠价格。",
        "康复训练": "我们提供康复训练场地和设备，帮助您快速恢复健康。",
        "设施维护": "我们定期对所有设施进行维护，确保设备和场地的安全。",
        "如何找到丢失的物品": "请到服务台登记您的丢失物品信息，我们会尽力帮助您找到。",
        "是否提供淋浴设施": "是的，我们提供淋浴设施，您可以在运动后使用。",
        "是否可以带外食": "为了保持场地的清洁，我们不允许带外食进入场地。",
        "如何投诉": "如果您有任何投诉，请在前台投诉。",
        "如何反馈建议": "我们欢迎您的建议，请在前台填写建议表格。",
        "是否提供Wi-Fi": "是的，我们提供免费Wi-Fi，您可以在场地内连接。",
        "是否提供洗衣服务": "很抱歉，我们不提供洗衣服务。",
        "如何查看我的积分": "在个人中心的积分页面，您可以查看您的积分和兑换记录。",
        "如何兑换积分": "在积分页面，选择您想要兑换的物品并提交兑换申请。",
        "是否可以带宠物": "为了安全起见，我们不允许带宠物进入场地。",
        "是否有急救设施": "是的，我们提供急救设施，并有专业人员随时待命。",
        "是否提供租车服务": "很抱歉，我们不提供租车服务。",
        "是否提供饮用水": "是的，我们提供免费的饮用水，您可以在各个场地找到饮水机。",
        "如何参加健身挑战": "在活动页面，查看挑战详情并报名参加。",
        "是否提供瑜伽课程": "是的，我们提供多种瑜伽课程，请在课程页面查看详细信息。",
        "是否有团购优惠": "是的，我们提供团购优惠，请在优惠页面查看详情。",
        "如何查看我的活动记录": "在个人中心的活动记录页面，您可以查看所有活动记录。",
        "如何申请场地使用许可": "请在场地预约页面填写申请表格。",
        "如何找到健身房": "在场地页面，您可以查看健身房的位置和路线。",
        "是否提供雨具": "很抱歉，我们不提供雨具。",
        "如何查看我的历史预订": "在个人中心的预订记录页面，您可以查看所有历史预订。",
        "如何获取最新活动信息": "请关注我们的公告栏和微信公众号，获取最新活动信息。",
        "如何找到我的预约信息": "在个人中心的预约页面，您可以查看所有预约信息。",
        "是否提供防护用品": "是的，我们提供口罩、消毒液等防护用品，请在服务台领取。",
        "如何找到洗手间": "请在场地内按照指示牌找到洗手间。",
        "是否提供场地导览": "是的，我们提供场地导览服务，请提前预约。",
        "如何查看我的反馈记录": "在个人中心的反馈记录页面，您可以查看所有反馈记录。",
        "如何查看我的会员权益": "在个人中心的会员权益页面，您可以查看所有会员特权和权益。",
        "是否提供应急电源": "我们不提供此类服务",
        "如何找到失物招领处": "在服务台登记您的丢失物品信息，我们会尽力帮助您找到。",
        // 用户模块
        "如何添加好友": "您可以在好友列表中搜索好友并发送添加请求。",
        "如何删除好友": "在好友列表中找到您要删除的好友，点击删除按钮即可。",
        "如何搜索好友": "使用好友列表中的搜索功能输入好友的名字进行搜索。",
        "如何发起私信聊天": "点击好友头像，然后点击私信聊天按钮即可开始聊天。",
        "如何查看聊天记录": "在私信聊天界面，向上滚动即可查看聊天记录。",
        "如何删除聊天记录": "在聊天记录中长按需要删除的消息，然后选择删除。",
        "如何发布动态": "在动态广场，点击发布按钮即可发布文字、图片或视频动态。",
        "如何点赞动态": "点击动态下方的点赞按钮即可为动态点赞。",
        "如何评论动态": "在动态下方输入评论内容，然后点击发送按钮。",
        "如何创建群组": "在群组页面，点击创建群组按钮，填写群组信息即可创建。",
        "如何加入群组": "在群组页面搜索您感兴趣的群组，点击加入按钮。",
        "如何发起活动": "在活动中心，点击发起活动按钮，填写活动信息即可发起。",
        "如何报名参加活动": "在活动中心，找到您感兴趣的活动，点击报名按钮。",
        "如何查看活动详情": "点击活动列表中的活动名称，即可查看详细信息。",

        // 场地预约功能
        "如何浏览场地": "在场地预约页面，选择运动种类即可浏览场地。",
        "如何搜索场地": "使用场地预约页面的搜索功能，根据地点、运动类型等条件进行搜索。",
        "如何预约场地": "在场地预约页面选择场地和时间段，然后点击预约按钮。",
        "如何取消预约": "在预约记录页面找到您要取消的预约，点击取消按钮。",
        "如何查看预约记录": "在个人中心的预约记录页面，您可以查看所有预约信息。",
        "如何评价场地": "在预约记录页面，找到您使用过的场地，点击评价按钮。",
        "如何使用优惠代码": "在预约页面输入您的优惠代码，系统会自动应用折扣。",

        // 个人中心
        "如何修改个人信息": "在个人中心的个人信息管理页面，点击编辑按钮进行修改。",
        "如何修改密码": "在个人信息管理页面，点击修改密码按钮。",
        "如何查看消息通知": "在个人中心的消息通知页面，您可以查看所有通知。",
        "如何标记消息已读": "在消息通知页面，点击消息右侧的标记已读按钮。",
        "如何管理运动数据": "在个人中心的运动数据统计页面，您可以查看和导出运动数据。",

        "如何找到失物招领处": "在服务台登记您的丢失物品信息，我们会尽力帮助您找到。"
      },
    };
  },
  methods: {
    sendMessage() {
      if (this.newMessage.trim() === '') return;

      // Add the user's message
      this.messages.push({
        id: Date.now(),
        username: '用户', // 客户端用户
        avatar: 'https://example.com/user-avatar.jpg', // 用户头像
        content: this.newMessage,
        time: new Date().toLocaleString(),
        self: true,
      });

      // Store the sent message for reply context
      const sentMessage = this.newMessage;

      // Clear the input field
      this.newMessage = '';

      // Simulate a reply from the system
      setTimeout(() => {
        this.messages.push({
          id: Date.now() + 1,
          username: '客服', // 客服系统
          avatar: 'https://example.com/customer-service-avatar.jpg', // 客服头像
          content: this.generateReply(sentMessage),
          time: new Date().toLocaleString(),
          self: false,
        });
      }, Math.random() * 3000 + 1000); // Random delay between 2 to 7 seconds
    },
    generateReply(sentMessage) {
      const closestMatch = this.getClosestMatch(sentMessage, Object.keys(this.responses));
      return this.responses[closestMatch] || '对不起，我不太明白您的问题。请详细描述一下。';
    },
    getClosestMatch(input, possibleMatches) {
      let closestMatch = '';
      let closestDistance = Infinity;

      possibleMatches.forEach(match => {
        const distance = this.levenshteinDistance(input, match);
        if (distance < closestDistance) {
          closestDistance = distance;
          closestMatch = match;
        }
      });

      return closestMatch;
    },
    levenshteinDistance(a, b) {
      const an = a ? a.length : 0;
      const bn = b ? b.length : 0;
      if (an === 0) return bn;
      if (bn === 0) return an;

      const matrix = new Array(an + 1);
      for (let i = 0; i <= an; i++) {
        matrix[i] = new Array(bn + 1);
        matrix[i][0] = i;
      }
      for (let j = 0; j <= bn; j++) {
        matrix[0][j] = j;
      }

      for (let i = 1; i <= an; i++) {
        for (let j = 1; j <= bn; j++) {
          const cost = a[i - 1] === b[j - 1] ? 0 : 1;
          matrix[i][j] = Math.min(
            matrix[i - 1][j] + 1,
            matrix[i][j - 1] + 1,
            matrix[i - 1][j - 1] + cost
          );
        }
      }

      return matrix[an][bn];
    }
  },
};
</script>

<style scoped>
.customer-service-page {
  padding: 20px;
}

.chat-box {
  height: 100%;
}

.messages {
  height: 400px;
  overflow-y: auto;
  padding: 10px;
  background-color: #f5f5f5;
}

.message {
  display: flex;
  margin-bottom: 10px;
}

.self-message {
  justify-content: flex-end;
  text-align: right;
}

.self-message .message-content {
  margin-right: 10px;
}

.message-content {
  margin-left: 10px;
}

.message-username {
  font-weight: bold;
}

.message-time {
  font-size: 12px;
  color: #888;
  margin-top: 5px;
}

.input-area {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.examples {
  margin-top: 20px;
  font-size: 14px;
  color: #888;
}

.examples ul {
  padding-left: 20px;
}

.examples li {
  list-style-type: disc;
  margin-bottom: 5px;
}

.self-avatar {
  order: 2;
}
</style>
